<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>aliyunOSS直传</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
	</head>
	<body>

		<div class="layui-upload">
			<div>
				<button type="button" class="layui-btn" id="test">单文件上传</button>
			</div>
			
			<div class="layui-upload-list">
				<img class="layui-upload-img" id="demo1">
				<p id="demoText"></p>
			</div>
		</div>

		<div class="layui-upload">
			<div>
				<button type="button" class="layui-btn test test1" >单文件上传test1</button>
			</div>
			
			<div class="layui-upload-list">
				<img class="layui-upload-img">
				<p id="demoText"></p>
			</div>
		</div>
		
		<div class="layui-upload">
			<div>
				<button type="button" class="layui-btn test test2" >单文件上传test2</button>
			</div>
			
			<div class="layui-upload-list">
				<img class="layui-upload-img">
				<p id="demoText"></p>
			</div>
		</div>
		
		<div class="layui-upload">
			<div>
				<button type="button" class="layui-btn test test3" >单文件上传test3</button>
			</div>
			
			<div class="layui-upload-list">
				<img class="layui-upload-img">
				<p id="demoText"></p>
			</div>
		</div>
		
		<div class="layui-upload">
			<div>
				<button type="button" class="layui-btn"  id="id">单文件上传id</button>
			</div>
			
			<div class="layui-upload-list">
				<img class="layui-upload-img">
				<p id="demoText"></p>
			</div>
		</div>

		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			<legend>上传多张图片</legend>
		</fieldset>

		<div class="layui-upload">
			<button type="button" class="layui-btn" id="test2">多图片上传</button>
			<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
				预览图：
				<div class="layui-upload-list" id="demo2"></div>
			</blockquote>
		</div>


		<div class="layui-upload">
			<button type="button" class="layui-btn" id="test3">上传音频</button>
			<div class="layui-upload-list">
				<audio class="layui-upload-img" id="demo3"></audio>
				<p id="demoText"></p>
			</div>
		</div>

<div class="layui-upload">
  <button type="button" class="layui-btn test8" >上传图片</button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo22">
    <p id="demoText"></p>
  </div>
  <div style="width: 95px;">
    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
      <div class="layui-progress-bar" lay-percent=""></div>
    </div>
  </div>
</div>   
		<script src="../../../layui/layui.js"></script>
		<script>
			layui.config({
				base: '../../../layui_exts/' //配置 layui 第三方扩展组件存放的基础目录
			}).extend({
				aliyunOSS: 'aliyunOSS/aliyunOSS'
			}).use(['aliyunOSS'], function() {
				var aliyunOSS = layui.aliyunOSS;
				var $ = layui.$;
				var that = this;
				var upload = layui.upload;
				var form = layui.form;
				
				//创建一个实例
				var uploadInst = upload.render({
				  elem: '#id'
				  ,url: '/api/upload/'
				  ,size: 1024*5 //限定大小
				});
				
				//执行示例
				var oss1 = that.oss1 =aliyunOSS.render({
					elem: '#test',
					multiple: false, //是否多文件上传
					fileType: 'images', //上传类型
					//fileSuffix: 'png', //文件后缀，不填或空则是不限制
					prefixPath: 'images', //上传路径

					policyUrl: 'http://localhost:3000/oss/sign?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxMDUxNmZkMTIzNzQ2NzM3MDBkOWExOSIsImlhdCI6MTYyODQ3MTA3MiwiZXhwIjoxNjI4NTU3NDcyfQ.frWAmbEFKjRyf6xiaLe71xtJtiHPKk-EcDamJWnB1sE', //签名地址
					method: 'POST', //签名及上传方式
					success: function(res) {
						console.log(res);
						$('#demo1').attr('src', res.data.url); //图片链接（base64）
						
						
										
										// setTimeout(function(){
										// 	var testOSS2 = aliyunOSS.render({
										// 		elem: '.test',
										// 		multiple: false, //是否多文件上传
										// 		fileType: 'images', //上传类型
										// 		//fileSuffix: 'png', //文件后缀，不填或空则是不限制
										// 		prefixPath: 'images', //上传路径
											
										// 		policyUrl: 'http://localhost:3000/oss/sign?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxMDUxNmZkMTIzNzQ2NzM3MDBkOWExOSIsImlhdCI6MTYyODQ3MTA3MiwiZXhwIjoxNjI4NTU3NDcyfQ.frWAmbEFKjRyf6xiaLe71xtJtiHPKk-EcDamJWnB1sE', //签名地址
										// 		method: 'POST', //签名及上传方式
										// 		success: function(res) {
										// 			console.log(this.item);
										// 			$($(this.item).parent()[0]).next()[0].outerHTML = '<img class="layui-upload-img" src="'+res.data.url+'">'
										// 			console.log('this',$(this.elemEvent[0]))
										// 			console.log('this',$($(this.elemEvent[0]).parent()[0]).next())
										// 		},
										// 		fail: function(e) {
											
										// 		}
										// 	});
										// 	console.log(testOSS2)
										// },100)
									
										
										form.render();
					},
					fail: function(e) {

					},
					allDone:function(e){
						console.log('全部上传')
						var t = new Date().getTime();
						$('body').append('<div class="layui-upload">'
											+'<div>'
												+'<button type="button" class="layui-btn test t-'+t+'" >单文件上传新增</button>'
											+'</div>'
											+'<div class="layui-upload-list">'
												+'<img class="layui-upload-img">'
												+'<p id="demoText"></p>'
											+'</div>'
										+'</div>');
										console.log(testOSS)
										testOSS.reload({elem: '.t-'+t});
					}
				});
				
				var testOSS = aliyunOSS.render({
					elem: '.test',
					multiple: false, //是否多文件上传
					fileType: 'images', //上传类型
					//fileSuffix: 'png', //文件后缀，不填或空则是不限制
					prefixPath: 'images', //上传路径
				
					policyUrl: 'http://localhost:3000/oss/sign?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxMDUxNmZkMTIzNzQ2NzM3MDBkOWExOSIsImlhdCI6MTYyODQ3MTA3MiwiZXhwIjoxNjI4NTU3NDcyfQ.frWAmbEFKjRyf6xiaLe71xtJtiHPKk-EcDamJWnB1sE', //签名地址
					method: 'POST', //签名及上传方式
					success: function(res) {
						console.log(this.item);
						$($(this.item).parent()[0]).next()[0].outerHTML = '<img class="layui-upload-img" src="'+res.data.url+'">'
						console.log('this',$(this.elemEvent[0]))
						console.log('this',$($(this.elemEvent[0]).parent()[0]).next())
					},
					fail: function(e) {
				
					},
					allDone:function(e){
						
					}
				});

				var imagesArray = [];
				var aliyunOSS2 = aliyunOSS.render({
					elem: '#test2',
					multiple: true, //是否多文件上传
					fileType: 'images', //上传类型
					fileSuffix: '', //文件后缀，不填或空则是不限制
					prefixPath: 'images/test', //上传路径
					policyUrl: 'http://localhost:3000/oss/sign?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxMDUxNmZkMTIzNzQ2NzM3MDBkOWExOSIsImlhdCI6MTYyODQ3MTA3MiwiZXhwIjoxNjI4NTU3NDcyfQ.frWAmbEFKjRyf6xiaLe71xtJtiHPKk-EcDamJWnB1sE', //签名地址
					method: 'POST', //签名及上传方式
					number: 3, //一次性可上传个数
					success: function(result) {
						console.log(result);
						//$('#demo1').attr('src', res.data.url); //图片链接（base64）
						$('#demo2').append('<img src="' + result.data.url + '"  class="layui-upload-img">')
						imagesArray.push(result);
						
					},
					allDone: function(result) {

						console.log('全部上传成功', result);
						console.log(that.oss1)
						aliyunOSS2.reload({number: 3 - imagesArray.length})
					},
					fail: function(e) {

					}
				});

				//执行示例
				aliyunOSS.render({
					elem: '#test3',
					multiple: false, //是否多文件上传
					fileType: 'audio', //上传类型
					//fileSuffix: 'png', //文件后缀，不填或空则是不限制
					prefixPath: 'audio', //上传路径
					number: 3,
					policyUrl: 'http://localhost:3000/oss/sign?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxMDUxNmZkMTIzNzQ2NzM3MDBkOWExOSIsImlhdCI6MTYyODQ3MTA3MiwiZXhwIjoxNjI4NTU3NDcyfQ.frWAmbEFKjRyf6xiaLe71xtJtiHPKk-EcDamJWnB1sE', //签名地址
					method: 'POST', //签名及上传方式
					success: function(res) {
						console.log(res);
						$('#demo3').attr('src', res.data.url); //图片链接（base64）
					},
					fail: function(e) {

					}
				});
				
				 //常规使用 - 普通图片上传
				  var uploadInst2 = upload.render({
				    elem: '.test8'
				    ,url: 'https://httpbin.org/post' //改成您自己的上传接口
				    ,before: function(obj){
				      //预读本地文件示例，不支持ie8
				      obj.preview(function(index, file, result){
				        $('#demo22').attr('src', result); //图片链接（base64）
				      });
				      
				     // layer.msg('上传中', {icon: 16, time: 0});
				    }
				    ,done: function(res){
				      //如果上传失败
				      if(res.code > 0){
				        return layer.msg('上传失败');
				      }
				      //上传成功的一些操作
				      //……
				      $('#demoText').html(''); //置空上传失败的状态
					  
					  $('body').append('<div class="layui-upload">'
					  					+'<div>'
					  						+'<button type="button" class="layui-btn test8" >单文件上传新增test8</button>'
					  					+'</div>'
					  					+'<div class="layui-upload-list">'
					  						+'<img class="layui-upload-img">'
					  						+'<p id="demoText"></p>'
					  					+'</div>'
					  				+'</div>');
									
									uploadInst2.reload({ elem: '.test8'});
									form.render();
				    }
				    ,error: function(){
				      //演示失败状态，并实现重传
	
				    }
				    //进度条
				    ,progress: function(n, elem, e){
				      
				    }
				  });
			});
		</script>
	</body>
</html>
